<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    #tab{
			    	width: 500px;
			    	height: 300px;
			   border-collapse: collapse;
				border: none;
			    	text-align: center;
		    }
			.gery1{
				background-color: gainsboro;
			}
		     .gery2{
				background-color:darkgrey;
			}
			#head{
				background-color: indianred;
			}
			th,td{
				border: 1px solid gainsboro;
			}
			.write{
				background-color: white;
			}
		</style>
	</head>
	<body>
		<table id="tab">
			<tr id="head"><th>序号</th><th>姓名</th><th>课程</th><th>成绩</th></tr>
			<tr class="gery1"><td>1</td><td>王可可</td><td>语文</td><td>100</td></tr>
			<tr class="gery2"><td>2</td><td>王可可</td><td>日语</td><td>100</td></tr>
			<tr class="gery1"><td>3</td><td>王可可</td><td>营销</td><td>100</td></tr>
			<tr class="gery2"><td>4</td><td>王可可</td><td>管理</td><td>100</td></tr>
			<tr class="gery1"><td>5</td><td>王可可</td><td>经济</td><td>100</td></tr>
			<tr class="gery2"><td>6</td><td>王可可</td><td>商务</td><td>100</td></tr>
		</table>
		
		<script>
			var change1 = document.getElementsByClassName("gery1");
			var change2 = document.getElementsByClassName("gery2");
			for(var i = 0; i < change1.length ;i++)
			{
				change2[i].onmouseover = hideColor;
				change2[i].onmouseout = showgery2Color;
				change1[i].onmouseover = hideColor;
				change1[i].onmouseout = showgery1Color;
			}
			function hideColor(event){
				this.className= "write";
			}
			function showgery1Color(event){
				this.className= "gery1";
			}
			function showgery2Color(event){
				this.className= "gery2";
			}
			
		</script>
	</body>
</html>
